<template>
    <div>
        <strong>{{ title }}</strong> <span class="waitC" v-if="title==='出口装船量 TEU'||title==='进口卸船量 TEU'" @click="handleProgress('aa')">待封航：{{wait}}</span>
        <div class="progress-flex progress-between mt-20">
            <div class="progress-flex">
                <!--<z-progress @click.native="handleProgress" style="cursor: pointer" :color="color" :num="num" :total="total" :noNum="noWrok" noColor="#095fb7"></z-progress>-->
                <div style="" class="new-pr">
                    <div @click="handleProgress(true)" style="background: #3F9FFE;width: 150px;text-align: center;padding: 2px 0">已作业量：<strong>{{ num }}</strong></div>
                    <div @click="handleProgress(false)" style="background: #6CC888;width: 150px;text-align: center;padding: 2px 0">未作业量：<strong>{{ noWrok }}</strong></div>
                </div>
                <div></div>
                <span style="font-size: 14px">合计 {{ total }}</span>
            </div>
            <div class="progress-btn" @click="handleClick" :style="'background:'+ color">{{ btn }}</div>
        </div>
    </div>
</template>

<script>
    import zProgress from '@/components/progress/z-progress'

    export default {
        name: "progress-count",
        props: {
            color: {
                type: String,
                default: '#3F9FFE'
            },
            total: {
                type: Number,
                required: true,
            },
            num: {
                type: Number,
                required: true,
            },
            noWrok: {
                type: Number,
                required: true,
            },
            title: {
                type: String,
                required: true
            },
            btn: {
                type: String,
                required: true
            },
            type: {
                type: String,
                required: true
            },
            wait:{
                type: Number
            }
        },
        components: {
            zProgress
        },
        data() {
            return {}
        },
        mounted() {

        },
        methods: {
            handleClick() {
                this.$emit('btn-click', this.type)
            },
            handleProgress(val) {
                this.$emit('line-click', val);
            }
        }
    }
</script>

<style scoped>
    .progress-box-header p {
        padding: 10px;
    }

    .progress-flex {
        display: flex;
    }

    .progress-flex span {
        font-size: 14px;
    }

    .progress-between {
        justify-content: space-between;
        align-items: center;
    }

    .progress-direction {
        flex-direction: column;
    }

    .progress-btn {
        color: #ffffff;
        padding: 5px;
        font-size: 12px;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        min-width: 70px;
    }

    .new-pr {
        font-size: 14px;
        cursor: pointer;
        width: 320px;
        display: flex;
        color: #ffffff;
    }
    .waitC{
        margin-left: 31px;
        color: #409efe;
        cursor: pointer;
    }
</style>
